<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
</head>
<link rel="icon" href="../images/hjh-img/favicon.ico">

<link rel="stylesheet" href="../css/hjh-home-style.css">
<link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="../css/homeMyData.css">

<body>

<nav class="home-nav">

    <div class="home-logo">
        <div class="home-logo-img-box">
            <a href="home.html">
                <img src="../images/hjh-img/logo_2.png" alt="" width="60">

            </a>

        </div>
        <div class="home-logo-txt">
            <p>骄阳幼稚园后台管理系统</p>
            <p class="home-logo-txt-en">Scorching sun Kindergarlen</p>
        </div>
    </div>

    <div class="home-user-box">

        <div class="home-user-img-box">
            <img src="" alt="" width="30px" height="30px" id="smalhead">

        </div>


        <div class="home-user-txt-box">
            <p>
                Hello ! <span id="homeUserName"></span>
                <span class="glyphicon glyphicon-menu-down home-user-txt-box-dropdown" id="userDown"
                      style="font-size: 12px"></span>
            </p>
            <ul class="user-item">
                <a href="home-myData.html" style="display:block;">
                    <li>
                        <span class="glyphicon glyphicon-home"></span>个人信息
                    </li>
                </a>
                <li><span class="glyphicon glyphicon-edit"></span>设置</li>
                <li style="height: 1px;background: #595959;width: 80%;margin-left: 10%"></li>
                <li><span class="glyphicon glyphicon-question-sign"></span>帮助</li>
                <a href="login.html" style="display: block">
                    <li>
                        <span class="glyphicon glyphicon-log-out"></span>退出
                    </li>
                </a>
            </ul>
        </div>


    </div>
</nav>
<div class="myData-content-box">

    <div class="myData-content">

        <header>
            <h2>个人信息</h2>
        </header>
        <div class="container-fluid">

            <section class="col-md-6 col-md-offset-3">
                <div class="user-head-box ">
                    <img src="" alt="" width="150" height="150" id="headimg">
                    <p id="changeHeadBtn" data-toggle="modal" data-target="#myModal">更换头像</p>
                </div>
                <div class="usernameData">
                    <label>
                        姓名:<br>
                        <input type="text" id="nameInput" placeholder="user"><span id="setName" class="set-style">修改</span>
                    </label><br>
                    <label>
                        账号:<br>
                        <input type="text" id="usernameInput" placeholder="123456"><span id="setUserName" class="set-style">修改</span>
                    </label><br>
                    <label>
                        修改密码:<br>
                        <input type="password" id="inputPassword" ><span id="setPassword" class="set-style">修改</span>
                        <span class="glyphicon glyphicon-eye-open" id="showPassword"></span>
                    </label>
                </div>
            </section>

        </div>


    </div>


</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="border: none">

                <h4>更换头像</h4>
            </div>
            <div class="modal-body" >

                <input type="file" id="setHeadFile">
                <br>

                <img src="../images/hjh-img/nohead.png" alt="" width="150" height="150" id="setHeadimg">
                <br>
                <br>
                <input type="button" value="上传并预览" id="submitHead">
            </div>
            <div class="modal-footer" style="border: none">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" id="changeHead">确定更改</button>

            </div>
        </div>
    </div>
</div>
<div id="myAlertEle">

</div>

<script src="../util/jquery-3.4.1.js">

</script>
<script src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="../js/home.js"></script>
<script src="../js/homeMyData.js"></script>
</body>
</html>